<template>
  <div class="read-ic-card">
    <p>{{$t('zWlkg0A6lQVPOhR4tHKbE')}}：</p>
    <p>1. {{$t('UEDlVbVKmsvH2b13sEsIg')}}<a href="http://www.mmglobalenergy.com/activefile/ReadCardid_Interface.zip">《ReadCardid_Interface.zip》</a></p>
    <p>2. {{$t('ZedYEo8JxE-LYkuNHbKr2')}} <i>ReadCardid_Interface.exe</i></p>
    <div class="select-content">
      <label for="number">{{$t('Q9nefNTq02UShWosepypx')}}：</label>
      <Select id="number" v-model="num" style="width: 130px;margin-right: 10px" size="small">
        <Option v-for="item in coms" :key="item.id" :value="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" size="small" @click="readCardNumber">{{$t('wrTQEllr7F_Rq1lh1WtN7')}}</Button>
    </div>
  </div>
</template>

<script>
import { readCardNumber } from '@/api/data2'

export default {
  name: 'ReadIcCard',
  data () {
    return {
      num: '-1',
      coms: Array.from({ length: 10 }).map((v, i) => {
        if (i === 0) {
          return { value: '-1', label: '--' + this.$t('TnVG-90mjtiIouH37fape') + '--' }
        } else {
          return { value: 'COM' + i, label: 'COM' + i }
        }
      })
    }
  },
  methods: {
    async readCardNumber () {
      if (this.num == -1) {
        this.$Message.error(this.$t('TnVG-90mjtiIouH37fape'))
        return
      }
      const { code, data, desc } = await readCardNumber({
        serialport: this.num
      })
      if (code == 200) {
        this.$emit('set-num', data)
      } else {
        this.$Message.error(desc || this.$t('Ci9ZArTrxfQbfcW00pbhI'))
      }
    }
  }

}
</script>

<style lang="stylus" scoped>
.read-ic-card
  margin-bottom 24px
  padding 0 0 0 150px
  p
    margin 5px 0
</style>
